<template>
  <div class="clcy">
    <Card title="业务查询">
      <div slot="cRight">
        <el-form inline size="small" :model="formA">
          <el-form-item label="业务编码">
            <el-input v-model="formA.valA"></el-input>
          </el-form-item>
          <el-form-item label="客户编码">
            <el-input v-model="formA.valB"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <Card title="业务审批">
        <div slot="cRight">
          <el-button type="primary" size="small" @click="dialogVisibleD = true"
            >业务审批</el-button
          >
          <el-button type="primary" size="small" @click="dialogVisibleC = true"
            >批量审批</el-button
          >
          <el-button type="primary" size="small" @click="dialogVisible = true">
            新增订单
          </el-button>
        </div>
        <section>
          <Table
            ref="table"
            :tableData="tableData"
            selection
            @btnClick="handleClick"
            @selectionChange="handleSelectionChange"
          ></Table>
          <Pagination :total="tableData.row.length"></Pagination>
        </section>
      </Card>
    </Card>

    <el-dialog
      close="dialog"
      title="新增订单"
      :visible.sync="dialogVisible"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <Dd />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="
            dialogVisible = false
            addTableData()
            $message({
              message: '提单成功，订单号为 3692',
              type: 'success'
            })
          "
        >
          提 交
        </el-button>
        <el-button @click="dialogVisible = false"> 取 消 </el-button>
      </span>
    </el-dialog>
    <el-dialog
      close="dialog"
      title="查看流程"
      :visible.sync="dialogVisibleA"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <img src="@/assets/lc/MAS.jpg" alt="" style="width: 100%" />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleA = false">
          返 回
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      close="dialog"
      title="审批查看"
      :visible.sync="dialogVisibleB"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <Table :tableData="tableDataA" />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleB = false">
          返 回
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      close="dialog"
      title="批量审批"
      :visible.sync="dialogVisibleC"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <el-input
          type="textarea"
          :autosize="{ minRows: 25 }"
          placeholder="请输入审批内容"
          v-model="textareaA"
        />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="
            dialogVisibleC = false
            editRow()
            $message({
              message: '送OSS4.0平台成功',
              type: 'success'
            })
          "
        >
          送OSS4.0平台
        </el-button>
        <el-button type="primary" @click="dialogVisibleC = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      close="dialog"
      title="审批"
      :visible.sync="dialogVisibleD"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <el-input
          type="textarea"
          :autosize="{ minRows: 25 }"
          placeholder="请输入审批内容"
          v-model="textarea"
        />
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="
            dialogVisibleD = false
            $message({
              message: '审批成功',
              type: 'success'
            })
          "
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
import Pagination from '@/components/Pagination'
import Dd from './components/Dd'
export default {
  components: {
    Card,
    Table,
    Pagination,
    Dd
  },

  data() {
    return {
      selectVal: [],
      textarea: '',
      textareaA: '',
      formA: {
        valA: '',
        valB: ''
      },
      dialogVisible: false,
      dialogVisibleA: false,
      dialogVisibleB: false,
      dialogVisibleC: false,
      dialogVisibleD: false,
      tableData: {
        col: [
          {
            prop: 'colA',
            label: '订单号'
          },
          {
            prop: 'colB',
            label: '客户名称'
          },
          {
            prop: 'colC',
            label: '客户编码'
          },
          {
            prop: 'colD',
            label: '业务名称'
          },
          {
            prop: 'colE',
            label: '状态'
          },
          {
            prop: 'colF',
            label: '操作',
            type: 'Button',
            width: '300px',
            btnList: [
              { label: '查看订单' },
              { label: '查看流程' },
              { label: '审批查看' }
            ]
          }
        ],
        row: [
          {
            colA: '3689',
            colB: '方正集团',
            colC: '43243243',
            colD: '长流程云MAS局数据',
            colE: '部门领导审核'
          },
          {
            colA: '3690',
            colB: '正丰集团',
            colC: '43243256',
            colD: '长流程云MAS局数据',
            colE: '部门领导审核'
          },
          {
            colA: '3691',
            colB: '胡氏集团',
            colC: '43243278',
            colD: '长流程云MAS局数据',
            colE: '部门领导审核'
          }
        ]
      },
      tableDataA: {
        col: [
          {
            prop: 'colA',
            label: '序号'
          },
          {
            prop: 'colB',
            label: '人员'
          },
          {
            prop: 'colC',
            label: '部门'
          },
          {
            prop: 'colD',
            label: '审批状态'
          },
          {
            prop: 'colE',
            label: '审批意见'
          },
          {
            prop: 'colF',
            label: '时间'
          }
        ],
        row: [
          {
            colA: '1',
            colB: '杨正',
            colC: '业务管理员',
            colD: '通过',
            colE: '通过',
            colF: '2020-01-03'
          },
          {
            colA: '2',
            colB: '李亮',
            colC: '信息化部',
            colD: '通过',
            colE: '通过',
            colF: '2020-01-04'
          },
          {
            colA: '3',
            colB: '孙正',
            colC: '信息化部',
            colD: '通过',
            colE: '通过',
            colF: '2020-01-08'
          }
        ]
      }
    }
  },

  computed: {
    sss() {
      return this.dialogVisibleC
    }
  },

  methods: {
    handleClick(index) {
      if (index === 1) this.dialogVisibleA = true
      if (index === 2) this.dialogVisibleB = true
    },

    handleSelectionChange(val) {
      this.selectTable = val
    },
    editRow() {
      this.selectTable.forEach(item => {
        item.colE = '总部调度员审核'
      })
      this.$refs.table.toggleSelection()
    },
    addTableData() {
      this.tableData.row.push({
        colA: '3692',
        colB: '光正集团',
        colC: '43245412',
        colD: '长流程云MAS局数据',
        colE: '部门领导审核'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0 !important;
}
/deep/.el-dialog__body {
  height: 62vh;
}
</style>
